<template>
	<view>
		<view class="desc-box" v-for="(item, index) in list.data"  :key="index">
			<slot>
				<view class="desc-list">
					<!-- view class="desc-tit">
						<view class="tit">{{counselData.title}}</view>
						<view class="time">{{ item.publish_time}}</view>
						<img class="head_avatar" :src="`${constant.imgUrl}getguest/guest_btn.png`" alt/>
					</view>-->
					<view class="desc-body" @click="goDetail(item)">
						<view class="update_con_title ellipsis_two_line_com title"
							  v-if="['poster'].indexOf(counselData.type)>=0">{{ item.copywriting }}</view>
						<view class="desc-img_box">
							<img :src="`${item[counselData.myKey.images]}?x-oss-process=image/resize,m_fill,h_480,w_1065`" alt="图片" mode="aspectFill"/>
							<view v-if="counselData.type==='article'" class="tag">{{ item.cat_name }}</view>
						</view>
						<view class="desc-info_box">
							<h3 v-if="['case','article'].indexOf(counselData.type)>=0">
								<span :class="[item.is_public ===1?'':'red_tit']">{{ item.is_public ===1?'平台':'' }}</span>
								{{ item[counselData.myKey.title] }}
							</h3>
							<view v-if="counselData.type==='case'" class="roomInfo">{{ item.acreage }} | {{ item.room }} | {{item.case_style_name }} </view>
							<!-- view| {{ item.price }} /view>-->
							<view class="desc-num_box">
								<app-user-attr :attrData="item.share_user_list"/>
								<view class="num">{{ item.extension_num }}人分享&nbsp;|&nbsp;获客{{ item.huoke_num }}人</view>
							</view>
						</view>
					</view>
				</view>
				<div class="item_list_bottom" v-if="$util.shieldReview()">
					<div class="shop_btn_com" v-if="delBtn && item.source_type == 2" @click.stop="delList(item)">删除</div>
					<!--<div class="shop_btn_com" @click.stop="toMaterialList(item)"
						 v-if="['case','article'].indexOf(counselData.type)>=0">朋友圈推广
					</div>-->
					<!-- div class="shop_btn_com" @click.stop="pushIteam(item)">
						推给团队
					</div>-->
					<div class="shop_btn_com share_btn"  @click="popularize(item)">
						<i class="iconfont iconfenxiang"></i>分享
					</div>
				</div>
			</slot>
		</view>
		<!-- 分享弹窗 -->
		<v-sharePoster ref="sharePoster" :type="counselData.shareType" v-if="list.data.length"></v-sharePoster>
		<view v-if="list.finished&&list.data.length!==0" class="noMore">没有更多了</view>
		<app-wrapper-empty  :is-loading="list.loading" title="暂无数据内容" :is-empty="list.data.length===0"/>
	</view>
</template>

<script>
import AppUserAttr from '@/pages/components/appUserAttr'
import SharePoster from '@/pages/components/sharePoster'
import AppWrapperEmpty from '@/components/App_wrapper_empty'

export default {
	name: 'CounselList',
	components: {
		'app-user-attr': AppUserAttr,
		'v-sharePoster': SharePoster,
		AppWrapperEmpty
	},
	props: {
		list: {
			type: Object,
			default: () => {}
		},
		counselData: {
			type: Object,
			default: () => {},
			request: true
		},
		// 是否显示删除按钮
		delBtn: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			constant: this.$constant
		}
	},
	mounted() {
	},
	methods: {
	    // 公共参数
		forParams(data) {
			return {
				id: data[this.counselData.myKey.id],
				images: data[this.counselData.myKey.images],
				title: data[this.counselData.myKey.title],
				extension_num: data.extension_num,
				huoke_num: data.huoke_num
			}
		},
		// ==进入详情==
		goDetail(val) {
			this.$emit('goDetail', val)
		},
		// ==删除列表==
		delList(data) {
			this.$emit('del', data)
		},
		// ==朋友圈推广==
		toMaterialList(data, type) {
			this.$emit('toMaterialList', data)
		},
		// ===推给团队===
		pushIteam(data, type) {
			this.$emit('pushIteam', data)
		},
		// ===推广获客===
		popularize(data) {
			this.$emit('popularize', data)
		}
	}

}
</script>

<style lang="scss" scoped>
	.app-content {
		line-height: 1;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.desc-box {
		background-color: #ffffff;
		margin-top: 20px;
		margin-bottom: 20px;
		uni-button{
			margin: 0 0 0 10px;
		}
		& .desc-list {
			padding:20px;
			border-radius: 20px;

			& .desc-tit {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				& .head_avatar {
					width: 66px;
					height: 66px;
					border-radius: 50%;
					position: absolute;
					top: 50%;
					transform: translate(0, -50%);
					left: -80px;
				}

				& .tit {
					flex: 1;
					font-size: 32px;
					color: #333333;
					font-weight: 600;
					padding: 14px 20px 20px 0;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				& .time {
					color: #999999;
					font-weight: 400;
					font-size: 24px;
				}
			}

			& .desc-body {
				box-shadow: 0px 2px 8px 0px rgba(241, 241, 241, 1);
				border-radius: 20px;
				overflow: hidden;
				.title{
					margin: 20px 0;
					font-size: 28px;
				}

				& .desc-img_box {
					height: 320px;
					width: 100%;
					border-top-left-radius: 20px;
					border-top-right-radius: 20px;
					position: relative;

					& img {
						width: 100%;
						height: 100%;
						border-top-left-radius: 20px;
						border-top-right-radius: 20px;
						object-fit: cover;
					}

					& .tag {
						position: absolute;
						left: 0;
						bottom: 0;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 0px 18px 0px 0px;
						font-size: 24px;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						padding: 12px 12px 6px;
					}
				}

				& .desc-info_box {
					padding:20px 20px 20px 0px;
					margin-bottom: 20px;
					h3 {
						& > span {
							font-size: 24px;
							font-weight: 400;
							padding:10px;
							background-color: #f3f3fe;
							color: #2965fe;

							&.red_tit {
								color: #ff6900;
								background-color: #fff5ef;
							}
						}

						font-weight: 600;
						font-size: 30px;
						color: rgba(51, 51, 51, 1);
						line-height: 45px;
						display: inline-block;
						width: 85%;
						white-space: nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
					}

					.roomInfo {
						color:rgba(255, 255, 255, 1);
						font-size: 24px;
						font-weight: 400;
						margin-left: 20px;
						position: relative;
						left: -20px;
						top:-100px;
					}

					& .desc-num_box {
						display: flex;
						align-items: center;
						//justify-content: left;
						//position: relative;
						//top:-20px;
						//margin-bottom: 20px;
						border-bottom-left-radius: 20px;
						border-bottom-right-radius: 20px;

					& .num {
						font-weight: 400;
						font-size: 24px;
						color: rgba(153, 153, 153, 1);
						left: -10px;
						margin-top: 20px;
						}
					}
				}
			}
		}
		.item_list_bottom {
		//	padding-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		//	margin: 30px 30px 0 0;
			.shop_btn_com {
				display: flex;
				align-items: center;
				height: 50px;
				padding: 0 24px;
				font-size: 24px;
				border-radius: 50px;
				color: #333333;
				background-color: #f5f5f5;
				margin-left: 20px;
				position: relative;
				left: -40px;
				top:-90px;
			}
			.share_btn {
				// background: linear-gradient(90deg, #ff7d6d, #ff4444);
				font-size: 24px;
				padding: 0 24px;
            	// box-shadow: 0px 2px 4px #9D9D9D;
				.iconfenxiang{
					font-size: 24px;
				}

				i {
					margin-right: 6px;
				}

				.big_text {
					font-size: 32px;
				}
			}
		}
	}
</style>
